*{
	padding: 0;
	margin: 0;
}
#box{
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	overflow: hidden;
}
.kuang1{
	position: absolute;
    width: 92%;
    height: 9%;
    /*background-color: red;*/
    left: 3%;
    z-index: 111;
    top: 32%;
}
.kuang2{
	position: absolute;
    width: 92%;
    height: 9%;
    /*background-color: red;*/
    left: 3%;
    z-index: 111;
    top: 54%;
}
.kuang3{
	position: absolute;
    width: 92%;
    height: 15%;
    /*background-color: red;*/
    left: 3%;
    z-index: 111;
    top: 77%;
}
.wx1{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 11111;
	/*display: none;*/
}
.wx1-sz{
	    position: absolute;
    font-size: 81%;
    left: 37%;
    top: 51%;
    color: white;
}
.w100vw{
	position: absolute;
	width: 100%;
}
.wx1-yun{
	position: absolute;
    width: 29%;
    left: 14%;
    top: 4%;
    animation: wx1yun 3s linear infinite alternate;
}
@keyframes wx1yun{
	from{left: 14%;}
	to{left: 25%;}
}
.wx1-guangyun{
	position: absolute;
    width: 53%;
    height: 29%;
    background-color: #73b57c;
    border-radius: 50%;
    left: 21%;
    top: 39%;
    opacity: 0.7;
    box-shadow: 0px 0px 200px rgb(115 181 124);
    /* filter: url(../img/p1/guangyun.png); */
    animation: guangyun 1s linear infinite alternate;
}
@keyframes guangyun{
	0%{opacity: 0.7;transform: scale(1);}
	90%{opacity: 0.2;transform: scale(1);}
	100%{opacity: 0;transform: scale(1)}
	
}
.white{
	position: absolute;
	width: 53%;
    height: 29%;
    background-color: white;
    border-radius: 50%;
    left: 21%;
    top: 39%;
}
.wx1-guangyun1{
	position: absolute;
    width: 83%;
    left: 46%;
    top: -24%;
    opacity: 0.7;
    animation: guangyun 1s linear infinite alternate;
	
}
.wx1-flower{
	position: absolute;
    width: 31%;
    left: 11%;
    top: 73%;
    transform-origin: bottom;
    animation: flower 2s linear infinite alternate;
}
@keyframes flower{
	from{transform: rotate(-3deg);}
	to{transform: rotate(3deg);}
}
.wx1-jzt{
	position: absolute;
	width: 100%;
}
.wx1-jzt1{
	position: absolute;
    width: 72%;
    height: 2%;
    left: 15%;
    top: 47%;
    background-color: #9fd2c2;
    border-radius: 10px;
}
.wx1-ttt{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fc9f08;
	border-radius: 10px;
}
.wx1-goddess{
	position: absolute;
    width: 10%;
    left: -2%;
    top: -277%;
}
.wx2{
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
}
.wx2-orange{
	position: absolute;
    width: 72%;
    left: 16%;
    top: 27%;
}
.wx2-green{
	position: absolute;
    width: 87%;
    left: 7.5%;
    top: 22.6%;
    opacity: 0.8;
    animation: wx2green 1s linear infinite alternate;
}
@keyframes wx2green{
	from{opacity: 0.8;}
	to{opacity: 0.2;}
}
.wx2-yun{
	position: absolute;
    width: 29%;
    left: 72%;
    top: 19%;
    animation: wx2yun 3s linear infinite alternate;
}
@keyframes wx2yun{
	from{left: 72%;}
	to{left: 65%;}
}
.wx2-flower{
	position: absolute;
    width: 31%;
    left: 11%;
    top: 73%;
    transform-origin: bottom;
    animation: flower 2s linear infinite alternate;
}
.btn2{
	position: absolute;
    width: 50%;
    left: 25%;
    top: 86%;
}
.wx3{
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
}
.wx3-orange{
	position: absolute;
    width: 71%;
    left: 15%;
    top: -11%;
}
.wx3-green{
	position: absolute;
    width: 84%;
    left: 8.5%;
    top: -14.4%;
    opacity: 0.8;
    animation: wx2green 1s linear infinite alternate;
}
.wx3-alert{
	position: absolute;
    width: 89%;
    left: 7%;
    top: 11%;
}
.btn3{
	position: absolute;
    width: 44%;
    height: 6%;
    left: 29%;
    top: 89%;
    /*background-color: red;*/
}
/*.wx4{
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
}*/
.wx4{
			position: absolute;
			width: 100%;
			height: 100%;
			background-image: url(../img/p4/p4bj.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: none;
		}
		.wx4-green{
	position: absolute;
    width: 84%;
    left: 8.5%;
    top: -33.4%;
    opacity: 0.8;
    animation: wx2green 1s linear infinite alternate;
}
.wx4-orange{
	position: absolute;
    width: 71%;
    left: 15%;
    top: -30%;
}
.wx4-goddess{
	position: absolute;
    width: 61%;
    left: 19%;
    top: 0%;
}
.wx4-yun{
	position: absolute;
    width: 29%;
    left: 72%;
    top: 10%;
    animation: wx2yun 3s linear infinite alternate;
}
.aa{
		position: absolute;
    			width: 25%;
    			height: 18%;
    			/*overflow: hidden;*/
		}
		.banner1{
			    
    			/*background-color: red;*/
    			left: 5%;
    			top: 15%;
		}
		.banner2{
				left: 37%;
				top: 15%;
		}
		.banner3{
				left: 69%;
				top: 15%;
		}
		.banner4{
				left: 5%;
				top: 37%;
		}
		.banner5{
				left: 37%;
				top: 37%;
		}
		.banner6{
				left: 69%;
				top: 37%;
		}
		.banner7{
				left: 5%;
				top: 60%;
		}
		.banner8{
				left: 37%;
				top: 60%;
		}
		.banner9{
				left: 69%;
				top: 60%;
		}
		.wx4-rabbit{
			    position: absolute;
    			width: 50%;
    			left: 30%;
    			/*top: 10%;*/
    			top: 100%;
    			opacity: 0;
    			/*animation: rabbit 1.9s linear alternate   backwards;*/
		}
		.wx4-frog{
			position: absolute;
    		width: 50%;
    		left: 27%;
    		opacity: 0;
    			/*animation: qw 1.9s linear alternate backwards;*/
    		/*top: 31%;*/
    		top: 100%;
		}
		@keyframes rabbit{
			0%{top: 10%;opacity: 1;display: block;}
			50%{top: 0%;}
			90%{top: 10%;opacity: 1;}
			100%{top: 10%;opacity: 0;display: none;}
		}
		@keyframes qw{
			0%{top: 31%;opacity: 1;display: block;}
			50%{top: 21%;}
			90%{top: 31%;opacity: 1;}
			100%{top: 21%;opacity: 0;display: none;}
		}
		@keyframes fei{
			0%{opacity: 1;transform: scale(1);}
			100%{opacity: 1;transform: scale(0.5);}
		}
		


.wx4-countdown{
	position: absolute;
    font-size: 100%;
    left: 26%;
    top: 4%;
    color: #ff5d09;
    font-weight: bold;
}
.wx4-countdown2{
	position: absolute;
    font-size: 100%;
    left: 26%;
    top: 4%;
    color: #ff5d09;
    font-weight: bold;
    display: none;
}
.wx4-fenmu{
	position: absolute;
    font-size: 100%;
    left: 89%;
    top: 4%;
    color: #ff5d09;
    font-weight: bold;
}
.wx4-fs{
	position: absolute;
    font-size: 100%;
    left: 84%;
    top: 4%;
    color: #ff5d09;
    font-weight: bold;
}
.wx4-alert{
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../img/p4/p4-alert-black.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: none;
}
.wx4-alert2{
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../img/p4/p4-alert-black.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: none;
}
@keyframes wfy1{
	from{opacity: 1;}
	to{opacity: 0;}
}
@keyframes wfy2{
	from{opacity: 0;}
	to{opacity: 1;}
}
.wx4-alert-defeat{
	position: absolute;
    width: 70%;
    left: 14%;
    top: 11%;
    animation: fd 1s linear backwards;
}
@keyframes fd{
	from{transform: scale(0);}
	to{transform: scale(1);}
}
.wx4-alert-zlyc{
	position: absolute;
    width: 50%;
    left: 25%;
    top: 57%;
    z-index: 112;
    animation: wfy2 .1s linear backwards;
}
.wx4-alert-zeby{
	position: absolute;
    width: 50%;
    left: 25%;
    top: 57%;
    z-index: 112;
    animation: wfy2 .1s linear backwards;
}
.wx4-alert-fanhui{
	position: absolute;
	width: 50%;
	left: 25%;
    animation: wfy2 .1s linear backwards;
	top: 70%;
	z-index: 112;
}
@keyframes fei{
	from{transform: scale(1);}
	to{transform: scale(0.2);}
}
.wx4-dui{
	position: absolute;
	width: 38%;
	left: 33%;
	top: 45%;
	display: none;
}
.wx4-cuo{
	position: absolute;
    width: 28%;
    left: 34%;
    top: 50%;
    display: none;
}
.hyinyue{
	position: absolute;
	width: 6vh;
	height: 6vh;
	background-image: url(../img/p2/yinle.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	top: 3%;
	right: 3%;
	z-index: 100;
	animation: hxz 2s linear infinite;
}
@keyframes hxz{
	from{transform: rotate(0);}
	to{transform: rotate(360deg);}
}




.wx5{
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
}
.wx5-flower1{
	position: absolute;
    width: 9%;
    left: 10%;
    /*top: 31%;*/
    animation: fl 4s ease-in-out infinite forwards;
}
@keyframes fl{
	/*0%{top: -30%;opacity: 0;}*/
	0%{top: -10%;transform: rotate(0deg);opacity: 1;}
	100%{top: 100%;transform: rotate(720deg);left: 30%;opacity: 1;}
	/*99%{top: -50%;opacity: 0;display: none;}*/
}
.wx5-flower5{
	position: absolute;
    width: 9%;
    left: 32%;
    /*top: 55%;*/
    animation: fl1 6s  ease-in-out infinite forwards;
    transform: rotateY(180deg);
}
@keyframes fl1{
	from{top: -10%;transform: rotate(0deg);}
	to{top: 100%;transform: rotate(1080deg);left: 60%;}
}
.wx5-flower6{
	position: absolute;
    width: 9%;
    left: 54%;
    /*top: 41%;*/
    animation: fl2 5s ease-in-out infinite forwards;
    transform: rotateY(180deg);
}
.wx5-flower8{
	position: absolute;
    width: 9%;
    left: 88%;
    /*top: 41%;*/
    animation: fl3 7s ease-in-out infinite forwards;
	}
@keyframes fl2{
	from{top: -10%;transform: rotate(0deg);}
	to{top: 100%;transform: rotate(360deg);left: 50%;}
}
@keyframes fl4{
	from{top: -10%;transform: rotate(0deg);}
	to{top: 100%;transform: rotate(360deg);left: 60%;}
}
@keyframes fl5{
	from{top: -10%;transform: rotate(0deg);}
	to{top: 100%;transform: rotate(1080deg);left: 40%;}
}
@keyframes fl6{
	0%{top: -10%;transform: rotate(0deg);}
	50%{top: 90%;transform: rotate(1080deg);}
	100%{top: 100%;transform: rotate(360deg);left: 50%;}
}
.wx5-flower2{
	position: absolute;
    width: 6%;
    animation: fl4 6s ease-in-out infinite forwards;
    left: 44%;
    /*top: 59%;*/
}
.wx5-flower9{
	position: absolute;
    width: 6%;
    animation: fl5 4s  ease-in-out infinite forwards;
    left: 66%;
    /*top: 59%;*/
}
.wx5-flower7{
	position: absolute;
    width: 6%;
    animation: fl2 5s 1s ease-in-out infinite forwards;
    left: 88%;
    /*top: 59%;*/
}
@keyframes fl3{
	from{top: -10%;transform: rotate(0deg);}
	to{top: 100%;transform: rotate(360deg);left: 10%;}
}
.wx5-flower3{
	position: absolute;
    width: 4%;
    animation: fl1 8s  ease-in-out infinite forwards;
    left: 30%;
    /*top: 15%;*/
}
.wx5-flower10{
	position: absolute;
    width: 4%;
    animation: fl6 5s 1s ease-in-out infinite forwards;
    left: 30%;
    /*top: 15%;*/
}
.wx5-flower4{
	position: absolute;
    width: 4%;
    left: 73%;
    animation: fl3 5s ease-in-out infinite forwards;
    /*top: 31%;*/
}
.wx5-green{
	    position: absolute;
    width: 84%;
    left: 38.5%;
    top: -19.4%;
    opacity: 0.8;
    animation: wx2green 1s linear infinite alternate;
}
.wx5-orange{
	position: absolute;
    width: 71%;
    left: 45%;
    top: -16%;
}
.wx5-yun1{
	    position: absolute;
    width: 29%;
    left: 72%;
    top: 26%;
    animation: wx5yun 3s linear infinite alternate;
}
@keyframes wx5yun{
	from{left: 72%;}
	to{left: 66%;}
}
@keyframes wx5yun2{
	from{left: 16%;}
	to{left: 10%;}
}
.wx5-yun2{
	    position: absolute;
    width: 30%;
    left: 16%;
    top: 7%;
    animation: wx5yun2 3s linear infinite alternate;
}
.btn5{
	position: absolute;
    width: 50%;
    left: 25%;
    top: 86%;
}
.wx5-goddess{
	position: absolute;
    width: 70%;
    left: -5%;
    top: 63%;
}
@keyframes dou{
	0%{left: -3%;top: 63%;}
	5%{left: -5%;top: 63%}
	10%{left: -3%;top: 63%;}
	15%{left: -5%;top: 63%}
	20%{left: -3%;top: 63%}
	30%{left: -5%;top: 63%;transform: scale(1);}
	70%{left: 14%;top: 35%;transform: scale(.8);}
	100%{left: 35%;top: -4%;transform: scale(.8);}
}
.wx6{
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
}
.wx6-bd{
	position: absolute;
    width: 100%;
    /*left: 10%;
    top: 13%;*/
}
.wx6-orange{
	position: absolute;
    width: 43%;
    left: 51%;
    top: 5%;
}
.wx6-green{
	position: absolute;
    width: 52%;
    left: 46.5%;
    top: 2.6%;
    opacity: 0.8;
    animation: wx2green 1s linear infinite alternate;
}
.wx6-goddess{
	position: absolute;
    width: 100%;
    left: 18%;
    top: 7%;
}
.wx6-dzj1{
	position: absolute;
    font-size: 80%;
    left: 19%;
    top: 37%;
	
}
.wx6-k{
	position: absolute;
    width: 69%;
    height: 12%;
    /*background-color: red;*/
    left: 16%;
    top: 45%;
}
.wx6-dzj2{
	    position: absolute;
    font-size: 80%;
    left: 3%;
    top: 9%;
	
}
.wx6-dzj3{
	    position: absolute;
    font-size: 80%;
    left: 76%;
    top: 64%;
	
}
.btn6{
	position: absolute;
    width: 50%;
    left: 25%;
    top: 86%;position: absolute;
	animation: btn6 3s 5s cubic-bezier(0.09, 0.54, 0.6, 0.92) backwards;
}
@keyframes btn6{
	from{left: 100%;}
	to{left: 25%;}
}
